<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">发消息</button>
  <button id="btn2">关闭</button>
  <script>
    // websocket是双向通信协议
    // 客户端和服务器建立连接后, 客户端可以给服务器发消息,服务器可以主动给客户端发消息
    // 1. 建立连接
    const ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello")
    // 2. 监听是否连接成功
    ws.onopen = () => {
      console.log('连接成功了')
    }
    // 3. 点击按钮发送消息给服务器
    document.querySelector('#btn').addEventListener('click', () => {
      ws.send('hello 123')
    })
    // 4. 接收服务器的消息
    ws.onmessage = (e)=> {
      console.log('服务器回的',e.data)
    }

    // 5. 监听关闭关闭
    ws.onclose = () => {
      console.log('聊天关闭了')
    }
    // 6. 主动关闭
    document.querySelector('#btn2').addEventListener('click', ()=>{
      ws.close()
    })
  </script>

  <script>
/* 
    socket.io-client
    // 1. 建立连接
    const socket: Socket = io('192.168.11.66:3000')
    // 2. 监听连接是否成功
    socket.on('connect', () => {
      console.log('连接成功')
      // 3. 发送消息 scoket.emit(消息类型,  发送的消息)
      socket.emit('chat message', 'hello123')
      // 6.监听关闭
      socket.on('disconnect', () => {
        console.log('断开连接')
      })
    })

    // 4. 接收消息
    socket.on('chat message', (e) => {
      console.log(e)
    })

    // 5.关闭 socket.close()
    onMounted(() => {
      document.querySelector('#btn')?.addEventListener('click', () => {
        socket.close()
      })
    }) */

  </script>
</body>
</html>